<template>
	<view class="detail-page">
		<bnn-loading :loading="isLoading"/>
		<view>
			<view class="proceeds">
				<view class="header">
					<view class="header-box">
						<view class="num" :class="headerData.accumulated_earnings>0?'red':'gree'">{{headerData.accumulated_earnings}}%</view>
						<view class="name">累计收益</view>
					</view>
					<view class="v-line"/>
					<view class="header-box">
						<view class="num" :class="headerData.earnings>0?'red':'gree'">{{(headerData.earnings*100).toFixed(2)}}%</view>
						<view class="name">今日收益</view>
					</view>
				</view>
				<view class="h-line"/>
				<view class="body">
					<view class="body-box">
						<view class="name">近1周收益</view>
						<view class="num" :class="headerData.week_earnings>0?'red':'gree'">{{headerData.week_earnings}}%</view>
					</view>
					<view class="body-box">
						<view class="name">近1月收益</view>
						<view class="num" :class="headerData.month_earnings>0?'red':'gree'">{{headerData.month_earnings}}%</view>
					</view>
					<view class="body-box">
						<view class="name">近3月收益</view>
						<view class="num" :class="headerData.three_month_earnings>0?'red':'gree'">{{headerData.three_month_earnings}}%</view>
					</view>
					<view class="body-box">
						<view class="name">近6月收益</view>
						<view class="num" :class="headerData.six_month_earnings>0?'red':'gree'">{{headerData.six_month_earnings}}%</view>
					</view>
					<view class="body-box">
						<view class="name">近1年收益</view>
						<view class="num" :class="headerData.year_earings>0?'red':'gree'">{{headerData.year_earings}}%</view>
					</view>
					<view class="body-box">
						<view class="name">年化收益</view>
						<view class="num" :class="headerData.year_earings>0?'red':'gree'">{{headerData.year_earings}}%</view>
					</view>
					<view class="body-box">
						<view class="name">最大回撤</view>
						<view class="num">{{derData.maxCanc}}</view>
					</view>
					<view class="body-box">
						<!-- 夏普比率 -->
						<view class="name">盈亏比</view>
						<view class="num">{{derData.windivfail}}</view>
					</view>
					<view class="body-box">
						<view class="name">当前资金</view>
						<view class="num">{{headerData.balanceb_f}}</view>
					</view>
					<view class="body-box">
						<view class="name">开始时间</view>
						<view class="num">{{derData.firstday}}</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-head">
					<view class="head-title">收益率走势</view>
				</view>
				<view class="card-body">
					<!-- ====================================================================== -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="charts-box">
						<qiun-data-charts type="area" loadingType="0" :chartData="chartOpt" />
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- <scroll-view scroll-y class="detail-body"> -->
			<view class="card">
				<view class="card-head">
					<view class="head-left">
						<view class="head-title">持仓信息</view>
					</view>
				</view>
				<view class="card-body">
					<u-table class="card-table">
						<u-tr class="table-tr">
							<u-th class="table-th" width="30%">名称</u-th>
							<u-th class="table-th" width="10%">方向</u-th>
							<u-th class="table-th" width="20%">持仓</u-th>
							<u-th class="table-th" width="20%">开仓均价</u-th>
							<u-th class="table-th" width="20%">浮动盈亏</u-th>
						</u-tr>
						<!-- strategy.strategyPositions -->
						<view class="mohu" v-if="isSubscribed">
							<image src="https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/mohu.png" mode="scaleToFill"></image>
							<view class="mohu_cont">
								<u-icon name="lock-fill" color="#7196DF" size="120"></u-icon>
								<view class="text">
									当前未订阅，信息订阅后才可显示
								</view>
							</view>
						</view>
						<view class="" v-else>
							<view v-for="(item, key) in strategyPData" :key="key">
							<u-tr class="table-tr tr_bottom">
								<u-td class="table-td" width="30%">{{item.qihuoname}}</u-td>
								<u-td class="table-td" width="10%"><text class="text_back1" :class="item.direction=='2'?'redbackground':'greenbackground'">{{item.direction=='2'?'买':'卖'}}</text> </u-td>
								<u-td class="table-td" width="20%">{{item.position}}</u-td>
								<u-td class="table-td" width="20%">{{item.open_price}}</u-td>
								<u-td class="table-td" width="20%">{{item.up_down_position}}</u-td>
							</u-tr>
							</view>
							<view v-if="strategyPData.length==0" class="notable">
									暂无数据
							</view>
						</view>
						
					</u-table>
				</view>
			</view>
			<view class="card">
				<view class="card-head">
					<view class="head-left">
						<view class="head-title">成交记录</view>
					</view>
					<view class="head-right">
					</view>
				</view>
				<view class="card-body">
					<u-table class="card-table">
						<u-tr class="table-tr">
							<u-th class="table-th" width="35%">成交时间</u-th>
							<u-th class="table-th" width="25%">品种合约</u-th>
							<u-th class="table-th" width="10%">类型</u-th>
							<u-th class="table-th" width="10%">数量</u-th>
							<u-th class="table-th" width="20%">价格</u-th>
						</u-tr>
						<view class="mohu1" v-if="isSubscribed">
							<image src="https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/hu1.png" mode="scaleToFill"></image>
							<view class="mohu_cont">
								<u-icon name="lock-fill" color="#7196DF" size="120"></u-icon>
								<view class="text">
									当前未订阅，信息订阅后才可显示
								</view>
							</view>
						</view>
						<view class="" v-else>
							<u-tr v-for="(item, key) in strategyData" :key="key" class="table-tr tr_bottom">
							<u-td class="table-td" width="35%">{{item.shortday}} {{item.trader_time}} {{item.trader_time==null?'00:00:00':''}}</u-td>
							<u-td class="table-td" width="25%">{{item.qihuoname}}</u-td>
							<u-td class="table-td" width="10%" v-if="item.b_s==1&&item.o_c==1"> <text class="text_back" :class="item.o_c==item.b_s?'greenbackground':'redbackground'">买跌</text></u-td>
							<u-td class="table-td" width="10%" v-else-if="item.b_s==0&&item.o_c==1"><text class="text_back" :class="item.o_c==item.b_s?'greenbackground':'redbackground'">买涨</text> </u-td>
							<u-td class="table-td" width="10%" v-else-if="item.b_s==0&&item.o_c==0"><text class="text_back" :class="item.o_c==item.b_s?'greenbackground':'redbackground'">卖跌</text></u-td>
							<u-td class="table-td" width="10%" v-else><text class="text_back" :class="item.o_c==item.b_s?'greenbackground':'redbackground'">卖涨</text></u-td>
							<u-td class="table-td" width="10%">{{item.lots}}</u-td>
							<u-td class="table-td" width="20%">{{item.price}}</u-td>
						</u-tr>
						<view v-if="strategyData.length==0" class="notable">
								暂无数据
						</view>
						</view>
					</u-table>
					<view v-if="!isSubscribed && strategyData.length > 0" class="more" @click="moreFn(id)">
						查看更多...
					</view>
					<u-popup v-model="ismake" width="80%" mode="bottom" :mask='false' :mask-close-able="false" :closeable="true" border-radius="10">
							<view class="makeCont">
								<view class="make_tit">预约咨询</view>
								<view class="make_name">我们将会安排您的专属客服，2小时内给您联系!</view>
								<view class="make_cont">
									<u-icon name="phone" size="40" :custom-style="customIcon"></u-icon> {{phone}}
								</view>
								<view class="make_btn">
									<u-button type="primary" @click="calluserFn">立即预约</u-button>
								</view>
							</view>
					</u-popup>
					<u-popup v-model="isrealname" width="80%" mode="bottom" :mask='false' :mask-close-able="false" :mask-custom-style="realnamebg" border-radius="10">
							<view class="makeCont">
								<view class="make_tit">订阅提示</view>
								<view class="make_name">您还未实名，应监管要求，同时为了您的权益保障，请实名后查看。</view>
								
								<view class="make_btn1">
									<u-button class="realbtn right" type="primary" @click="cancelFn">取消</u-button>
									<u-button class="realbtn" type="primary" @click="realnameFn">去实名</u-button>
								</view>
							</view>
					</u-popup>
					
					<u-popup v-model="israisal" width="80%" mode="bottom" :mask='false' :mask-close-able="false" :mask-custom-style="realnamebg" border-radius="10">
							<view class="makeCont">
								<view class="make_tit">订阅提示</view>
								<view class="make_name">您还未风险评测，是否前往评测？</view>
								<view class="make_btn1">
									<u-button class="realbtn right" type="primary" @click="cancelFn">取消</u-button>
									<u-button class="realbtn" type="primary" @click="raisalFn">去评测</u-button>
								</view>
							</view>
					</u-popup>
					<u-popup v-model="isStrateg" width="80%" mode="bottom" :mask='false' :mask-close-able="true" :mask-custom-style="Strategbg"  border-radius="10">
							<view class="makeCont">
								<view class="make_tit">订阅提示</view>
								<view class="make_name">免费体验{{effectiveTime}}天，请确认是否订阅？</view>
								<view class="make_btn1">
									<u-button class="realbtn right" type="primary" @click="isStrateg=false">取消</u-button>
									<u-button class="realbtn" type="primary" @click="StrategFn">确认</u-button>
								</view>
							</view>
					</u-popup>
				</view>
			</view>
			<view class="card">
				<view class="card-head">
					<view class="head-left">
						<view class="head-title">平仓记录</view>
					</view>
					<view class="head-right">
					</view>
				</view>
				<view class="card-body">
					<u-table class="card-table">
						<u-tr class="table-tr">
							<u-th class="table-th close1">开平日期</u-th>
							<u-th class="table-th close2">品种合约</u-th>
							<u-th class="table-th close3">类型</u-th>
							<u-th class="table-th close4">数量</u-th>
							<u-th class="table-th close5">开平价</u-th>
							<u-th class="table-th close6">平仓盈亏</u-th>
						</u-tr>
						<view class="">
							<u-tr v-for="(item, key) in closeList" :key="key" class="table-tr tr_bottom" style="height: 60px">
								<u-td class="table-td close1">{{item.open_date ? item.open_date : '-'}}<br/>——<br/>{{item.close_date ? item.close_date : '-'}}</u-td>
								<u-td class="table-td close2">{{item.qihuoname}}</u-td>
								<u-td class="table-td close3" v-if="item.b_s=='买'"> <text class="text_back redbackground">买</text></u-td>
								<u-td class="table-td close3" v-else><text class="text_back greenbackground">卖</text></u-td>
								<u-td class="table-td close4">{{item.positon}}</u-td>
								<u-td class="table-td close5">{{formatNum(item.open_price)}}<br/>——<br/>{{formatNum(item.trans_price)}}</u-td>
								<u-td class="table-td close6">{{formatNum(item.profit_loss)}}</u-td>
							</u-tr>
							<view v-if="closeList.length==0" class="notable">暂无数据</view>
						</view>
					</u-table>
					<view v-if="closeList.length > 0" class="more" @click="moreFn(id, 1)">
						查看更多...
					</view>
					<view class="hint">
						风险提示：过往业绩不预示未来表现，相关数据仅供参考，不构成投资建议。投资者应审慎决策，独立承担风险。市场有风险，投资需谨慎
					</view>
					<u-popup v-model="ismake" width="80%" mode="bottom" :mask='false' :closeable="true" border-radius="10">
						<view class="makeCont">
							<view class="make_tit">预约咨询</view>
							<view class="make_name">我们将会安排您的专属客服，2小时内给您联系!</view>
							<view class="make_cont">
								<u-icon name="phone" size="40" :custom-style="customIcon"></u-icon> {{phone}}
							</view>
							<view class="make_btn">
								<u-button type="primary" @click="calluserFn">立即预约</u-button>
							</view>
						</view>
					</u-popup>
					<u-popup v-model="isrealname" width="80%" mode="bottom" :mask='false' :mask-close-able="false" :mask-custom-style="realnamebg" border-radius="10">
						<view class="makeCont">
							<view class="make_tit">订阅提示</view>
							<view class="make_name">您还未实名，应监管要求，同时为了您的权益保障，请实名后查看。</view>
							
							<view class="make_btn1">
								<u-button class="realbtn right" type="primary" @click="cancelFn">取消</u-button>
								<u-button class="realbtn" type="primary" @click="realnameFn">去实名</u-button>
							</view>
						</view>
					</u-popup>
					
					<u-popup v-model="israisal" width="80%" mode="bottom" :mask='false' :mask-close-able="false" :mask-custom-style="realnamebg" border-radius="10">
						<view class="makeCont">
							<view class="make_tit">订阅提示</view>
							<view class="make_name">您还未风险评测，是否前往评测？</view>
							<view class="make_btn1">
								<u-button class="realbtn right" type="primary" @click="cancelFn">取消</u-button>
								<u-button class="realbtn" type="primary" @click="raisalFn">去评测</u-button>
							</view>
						</view>
					</u-popup>
					<u-popup v-model="isStrateg" width="80%" mode="bottom" :mask='false' :mask-close-able="true" :mask-custom-style="Strategbg"  border-radius="10">
						<view class="makeCont">
							<view class="make_tit">订阅提示</view>
							<view class="make_name">免费体验{{effectiveTime}}天，请确认是否订阅？</view>
							<view class="make_btn1">
								<u-button class="realbtn right" type="primary" @click="isStrateg=false">取消</u-button>
								<u-button class="realbtn" type="primary" @click="StrategFn">确认</u-button>
							</view>
						</view>
					</u-popup>
				</view>
			</view>
			<view style="height: 55px;"/>
		<!-- </scroll-view> -->
		<view v-if="userInfo.review_status == 1&&stylength!=0" class="detail-foot d-f j-c-b">
			<view class="foot-left d-f a-i-c">
				<view v-if="strategy.collection" class="slw-icon left-icon active" @click="delCollect">&#xe64b;</view>
				<view v-if="!strategy.collection" class="slw-icon left-icon" @click="addCollect">&#xe64c;</view>
			</view>
			<view class="foot-right d-f a-i-c">
				<view class="price-wrapper d-f a-i-b">
					<view class="sale-price" v-if="strategy.price==0">限时免费</view>
					<view class="sale-price" v-else>{{pay_type==0?price/100+'积分':'￥'+price/100+'/月'}}</view>
					<view class="origin-rice">￥{{pay_type==0?original_price/100+'积分':original_price/100+'/月'}}</view>
				</view>
				<view class="btn-subscribe d-f a-i-c j-c-c zixun"  @click="ismake=true">策略咨询</view>
				<view v-if="strategy.price==0&&strategy.priceList[0].is_index==1" class="btn-subscribe d-f a-i-c j-c-c" :class="strategy.left_stock==0?'ray':''" @click="freeStrategy(strategy)">免费体验</view>
				<view v-else class="btn-subscribe d-f a-i-c j-c-c" :class="strategy.left_stock==0?'ray':''" @click="toStrategyPayPage(strategy.left_stock)">
					<text v-if="strategy.left_stock==0">订阅已满</text>
					<text v-else>{{strategy.subscribed==0?'立即订阅':'立即续订'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from '@/utils/moment'
	import {getStrategyInfo, addStrategyCollect, delStrategyCollect,calluser,getUserinfo} from '@/api/strategy.js'
	import {toStrategyPayPage, toStrategyMarketPage,toAnyPage,toappraisalpahe} from '@/utils/PageRouter.js'
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import VTable from '@/components/v-table/index.vue'
	import StrategyInfoModel from '@/model/StrategyInfoModel.js'
	import EchartLine from '@/components/echarts/line/index.vue'
	import json from '@/static/json/echarts/strategy-detail.json'
	import {MEMBER_INFO} from '@/config/storage.js'
	import tableOne from '@/components/table/tableOne.vue'
	import {transactions} from '@/api/addons.js'
	import {createOrder,freeOrder,weChatPayConfig} from '@/api/trade.js'

	export default {
		components: {BnnLoading, VTable, EchartLine, tableOne},
		data() {
			const userInfo = uni.getStorageSync(MEMBER_INFO)
			return {
				effectiveTime:'1',
				phone:'',
				ismake:false,
				isrealname:false,
				israisal:false,
				isStrateg:false,
				Strategdata:[],
				makevalue:'',
				customIcon:{
					 marginRight:"5px"
				},
				realnamebg:{background:'rgba(0,0,0,.6)'},
				Strategbg:{background:'rgba(0,0,0,.6)'},
				headerData:[],
				derData:[],
				strategyPData:[],
				strategyData:[],
				closeList: [],
				userInfo: userInfo,
				traderList: [],
				strategyPositions: [],
				info: {
					date: '2019-08-15',
					startDate: '2019-06-15',
					endDate: '2019-010-15',
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				id: '',
				page:1,
				limit:10,
				isSubscribed:false,
				search: '',
				strategy: {},
				tagIndex: 0,
				tagList: [
					{id: '5', name: '全部', month: 100},
					{id: '1', name: '1月', month: 1},
					{id: '2', name: '3月', month: 3},
					{id: '3', name: '6月', month: 6},
					{id: '4', name: '1年', month: 12},
				],
				stylength:0,
				pay_type:0,
				price:0,
				original_price:0,
				isLoading: true,
				chartOpt:{
					categories: [],
					series: [{
						name: "策略收益",
						data: []
					}]
				},
				chartData: {
					id: 'fssfsfsf',
					grid: {
						top: '30px',
						right: '20px',
						left: '40px',
					},
					tooltip: {
						trigger: 'axis',
						position: function (pt) {
							return [pt[0], '10%'];
						},
						formatter: '{b0}<br/> {a0}:{c0}%',
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data:[]
					},
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}%'
						}
					}],
					dataZoom: [{
						type: 'inside',
						start: 0,
						end: 100,
						preventDefaultMouseMove: false
					}, {
						handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '80%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}],
					series: [
						{
							name: '沪深300',
							type: 'line',
							smooth: true,
							symbol: 'none',
							sampling: 'average',
							howAllSymbol: true,
							itemStyle: {
								color: 'rgb(39, 118, 182)',
							},
							data: []
						},
						{
							name: '策略收益',
							type: 'line',
							smooth: true,
							symbol: 'none',
							sampling: 'average',							
							howAllSymbol: true,
							itemStyle: {
								color: 'rgb(255, 0, 0)',
							},
							areaStyle: {
								color: 'rgb(247, 202, 201)'
							},
							data:[]
						},
					]
				}
			}
		},
		onLoad (option) {
			this.getInfo(option.id)
			this.ongetUserinfo()
			const userInfo = uni.getStorageSync(MEMBER_INFO)
			let {mobile}=uni.getStorageSync('userinfo_key')
			 mobile=""+mobile
			this.phone = mobile.substr(0,3) + "****" + mobile.substr(7)
		},
		onShow() {
			if (this.id) {
				this.getInfo(this.id)
			}
		},
		methods: {
			formatNum(val) {
				if(val && isFinite(val) && !isNaN(val)) {
					return Number(Number(val).toFixed(2))
				}
				return '0.00'
			},
			ongetUserinfo(){
				const raisal=uni.getStorageSync('appraisal_key')
				getUserinfo().then(res=>{
					if(!res.data.realname){
						setTimeout(()=>{
							this.isrealname=true
						},2000)
					}else if(res.data.assess_status==0&&!raisal){
						setTimeout(()=>{
							this.israisal=true
						},2000)
					}					
				})
			},
			raisalFn(){
				toappraisalpahe()
			},
			realnameFn(){
				toAnyPage('/pages/user/real-name/index')
			},
			cancelFn(){
				uni.navigateBack()
			},
			StrategFn(){
				console.log(3333333)
				let {type,id,price,priceList}=this.Strategdata
				freeOrder({id:priceList[0].id}).then(res=>{
					if(res.code==200&&res.data.code!=400){
						uni.showToast({title: '订阅成功',duration: 2000});
						this.isStrateg=false
					}else{
						this.isStrateg=false
						uni.showToast({title:res.data.msg,icon:'none'});
					}
					
				}).catch(err=>{
					if(err.code==200&&err.data.code!=400){
						uni.showToast({title: '订阅成功',duration: 2000});
						this.isStrateg=false
					}else{
						this.isStrateg=false
						uni.showToast({title:err.data.message,icon:'none'});
					}
				})
			},
			freeStrategy(item){
				let {realname}=uni.getStorageSync('userinfo_key')
				if(realname){
					this.isStrateg=true
					this.Strategdata=item
				}else{
					this.isrealname=true
				}
			},
			calluserFn(){
				const user=uni.getStorageSync('userinfo_key')
				let { mobile, realname, assess_status } = user
				if(assess_status === 1){
					let { name } = this.strategy
					calluser({name:realname,mobile:mobile,strategy_name:name}).then(res=>{
						if(res.code==200){
							if(res.data=='ok'){
								uni.showToast({
									title:"预约成功"
								})
							}else{
								uni.showToast({
									title:res.data,
									icon:'none'
								})
							}
							this.ismake=false
						}
					})
				}else{
					this.israisal=true
				}
			},
			moreFn(i, type=0){
				const that = this
				if (that.isSubscribed) {
					uni.showModal({
						title: '温馨提示',
						content: '您还未订阅策略，请订阅后查询',
						confirmText: '订阅',
						success(res) {
							if (res.confirm) {
								if (that.strategy.left_stock==0) {
									uni.showToast({
										title: '订阅已满',
										icon: 'none',
										duration: 1500
									})
								} else if (that.userInfo.review_status != 1 || that.stylength == 0) {
									uni.showToast({
										title: '该策略暂不支持订阅',
										icon: 'none',
										duration: 1500
									})
								} else {
									toStrategyPayPage(that.id)
								}
							}
						}
					})
				} else {
					uni.navigateTo({
						url:'./more/more?id='+i+'&type='+type
					})
				}
			},
			getType(info) {
				return (info.type === 'BUY' && info.offset === 'OPEN')
			},
			//	获取策略信息
			getInfo (i) {
				this.id = i
				getStrategyInfo({id:this.id}).then(res => {
					this.headerData=res.data.earningsReport
					this.derData=res.data.cacudata 
					this.chartData.xAxis.data=res.data.earningsGraph.date //时间
					this.chartData.series[1].data=res.data.earningsGraph.accumulated_earnings //盈利线数据
					this.chartOpt.categories = res.data.earningsGraph.date //时间
					this.chartOpt.series[0].data = res.data.earningsGraph.accumulated_earnings //盈利线数据
					this.strategyPData=res.data.strategyPositions
					this.strategyData=res.data.strategyTransaction
					this.closeList=res.data.Pingcang
					this.effectiveTime
					let {subscribed,left_stock}=res.data
					if(subscribed==0){
						this.isSubscribed=true						
					}else{
						this.isSubscribed=false	
					}
					const Model = new StrategyInfoModel()
					this.strategy = Model.setAttributes(res.data).toObject()
					this.stylength=this.strategy.priceList.length
					for(let i=0;i<this.stylength;i++){
						this.effectiveTime=this.strategy.priceList[0].effective_time
						if(this.strategy.priceList[i].pay_type==0){
							this.pay_type=0
							this.price=this.strategy.priceList[i].price
							this.original_price=this.strategy.priceList[i].original_price
						}else{
							this.pay_type=1
							this.price=this.strategy.priceList[i].price
							this.original_price=this.strategy.priceList[i].original_price
						}
						
					}
					setTimeout(() => {
						this.isLoading = false
					}, 200)
				})
			},
			//	收藏策略
			addCollect () {
				const {id, strategy} = this
				addStrategyCollect({id}).then(res => {
					strategy.collection = 1
					uni.showToast({title: '收藏策略成功', icon: 'none'})
				}).catch(res => {
					uni.showToast({title: '收藏失败', icon: 'none'})
				})
			},
			//	取消收藏策略
			delCollect () {
				const {id, strategy} = this
				delStrategyCollect({id}).then(res => {
					strategy.collection = null
					uni.showToast({title: '取消策略收藏', icon: 'none'})
				}).catch(res => {
					uni.showToast({title: '取消失败', icon: 'none'})
				})
			},
			//	修改搜索时间
			onDateChange (e, item) {
				item.date = e.detail.value
				item.loading = true
				const num = Math.ceil(Math.random() * 10)
				
				const data = []
				for(let i=0;i<num;i++) {
					let obj = {
						id: '49ba59abbe56e0' + (10 + i),
						age: 18,
						name: 'John Brown',
						date: e.detail.value,
						address: 'New York No. 1 Lake Park',
					}
					data.push(obj)
				}
				setTimeout(() => {
					item.data = data
					item.loading = false
				}, 1000)
			},
			toStrategyPayPage (i) {
					if(i==0){
						uni.showToast({
							title:"订阅量已满，请联系客服",
							icon:'none'
						})
					}else{
						toStrategyPayPage(this.id)
					}
			},
			toStrategyMarketPage() {
				toStrategyMarketPage()
			},
			//	更新图表
			changeEchart(item, key) {
				
				this.tagIndex = key
				const dates = this.chartData.xAxis.data
				const {chartData} = this
				const time = dates[dates.length - 1]
				
				const start = moment(time).subtract(item.month, 'months').valueOf()
				const end = moment(time).valueOf()
				
				const length = dates.length
				let count = 0
				dates.map(date => {
					const t = moment(date).valueOf()
					if (t>= start && t <= end) {
						count = count + 1
					}
				})
				const num = Math.round((count / length) * 100)
				const {dataZoom} = chartData
				const newZoom = dataZoom.map(item => {
					item.start = 100 - num
					item.end = 100
					return item
				})
				this.$set(this.chartData, dataZoom, newZoom)
			}
		}
	}
</script>

<style>
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
</style>
<style lang="scss" scoped>

	.makeCont{
		padding: 20px 15px;
		.make_tit{
			font-size: 20px;
			font-weight: bold;
			text-align: center;
		}
		.make_name{
			font-size: 14px;
			text-align: center;
			margin: 10px 0;
		}
		.make_cont{
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1rpx solid #F1F1F1;
		}
		.make_btn{
			margin: 15px 0;			
		}
		.make_btn1{
			margin:20px 0 0;
			display: flex;
			.realbtn{
				width: 50%;
			}
			.right{
				margin-right: 2px;
			}
		}
		
	}
	.text_back1{
		height: 20px;
		line-height: 20px;
		color: #fff;
		border-radius: 2px;
	}
	.text_back{
		height: 22px;
		line-height: 22px;
		color: #fff;
		border-radius: 2px;
	}
	.redbackground{
		background-color: rgb(231, 76, 60) !important;
	}
	.greenbackground{
		background-color: rgb(68, 184, 94) !important;
	}
	.hint{
		font-size: 10px;
		color: #aba9a9;
	}
	.tr_bottom{
		border-bottom:1rpx solid #e8e8e8;
	}
	.more{
		padding: 10px;
		text-align: center;
		color: #908d8d;
	}
	.mohu{
		height: 200px;
		position: relative;
		.mohu_cont{
			width: 70%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
			.text{
				width: 100%;
				text-align: center;
				background: #fff;
				font-size: 12px;
				color: #000;
				border: 2px solid #A5C2D9;
				border-radius:5px;
				margin-top: 10px;
			}
		}
	}
	.mohu1{
		height: 500px;
		position: relative;
		.mohu_cont{
			width: 70%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
			.text{
				width: 100%;
				text-align: center;
				background: #fff;
				font-size: 12px;
				color: #000;
				border: 2px solid #A5C2D9;
				border-radius:5px;
				margin-top: 10px;
			}
		}
	}
	.mohu img{
		width: 100%;
		height: 180px;
	}
	.tag-list{
		display: flex;
		.tag-item{
			padding: 8rpx 16rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			background-color: #f7f7f7;
		}
		.tag-item.active{
			color: #fff;
			background-color: $theme_color;
		}
	}
	
	.red{color: rgb(231, 76, 60) !important;}
	.gree{color: rgb(68, 184, 94) !important;}
	.echarts{
		width: 100%;
		height: 500rpx;
	}
	.detail-page{
		.detail-body{
			/* #ifdef APP-PLUS */
			height: 100vh;
			/* #endif */
			
			/* #ifndef APP-PLUS */
			height: calc(100vh - var(--window-top));
			/* #endif */
		}
		.proceeds{
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.header{
				height: 100rpx;
				display: flex;
				padding-bottom: 20rpx;
				.header-box{
					flex: 1;
					display: flex;
					align-items: center;
					flex-direction: column;
					.num{
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					.name{
						color: #666;
						font-size: 32rpx;
					}
				}
			}
			.body{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.body-box{
					width: 320rpx;
					display: flex;
					margin-top: 10rpx;
					.name{
						width: 150rpx;
						color: #666;
					}
					.num{
						color: #333;
					}
				}
			}
		}
		.subscribe-hint{
			color: #9ea5bd;
			padding: 30rpx 0 20rpx;
			font-size: 24rpx;
			text-align: right;
		}
		
		.data-hint{
			color: #9ea5bd;
			padding: 30rpx 0 20rpx;
			font-size: 24rpx;
			text-align: right;
		}
		
		.card{
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			.card-head{
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.head-left{
					display: flex;
					align-items: center;
				}
				.head-title{
					color: #333;
					font-size: 34rpx;
					font-weight: bold;
					border-left: 8rpx solid $theme_color;
					padding: 0 20rpx;
				}
				.datepicker-btn{
					width: 220rpx;
					color: #d4d8df;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 2rpx 20rpx;
					border: 2rpx solid #e6e6e6;
					border-radius: 8rpx;
					.date-text{
					}
					.date-icon{
					}
				}
				.head-btn{
					font-size: 28rpx;
					color: #fff;
					padding: 6rpx 16rpx;
					background: $theme_color;
					border-radius: 4rpx;
				}
			}
			.card-body{
			}
		}
	
		.detail-foot{
			width: 100%;
			height: 100rpx;
			z-index: 50;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			.foot-left{
				padding-left: 30rpx;
				.left-icon.active{color: $theme_color;}
				.left-icon{
					color: #666;
					font-size: 56rpx;
				}
			}
			.foot-right{
				.price-wrapper{
					margin-right: 10rpx;
					.sale-price{
						color: #e74c3c;
						font-size: 26rpx;
					}
					.origin-rice{
						color: #999;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
				.btn-subscribe{
					color: #fff;
					width: 200rpx;
					height: 100%;
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 5px;
					background-color: $theme_color;
				}
				.zixun{
					background-color:#354571;
				}
				.ray{
					background-color:#d0d0d0;
				}
			}
		}
	}
	.notable{
		height: 80px;
		line-height: 80px;
		text-align: center;
	}
	.table-one{
		.table-thead{
			width: 100%;
			background: #dce8fd;
			.table-thead__tr{
				display: flex;
				font-size: 30rpx;
			}
			.table-thead__th{
				flex: 1;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.table-tbody{
			width: 100%;
			.table-tbody__tr{
				display: flex;
				font-size: 28rpx;
			}
			.table-tbody__th{
				width: 20%;
				height: 60rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;
				vertical-align: middle;
			}
		}
		
	}
	/deep/ .card-body{
		padding-bottom: 30rpx;
	}
	/deep/ .card-table{
		border: none !important;
	}
	/deep/ .table-tr{
		height: 64rpx;
	}
	/deep/ .table-th{
		border: none !important;
	}
	/deep/ .table-td{
		border: none !important;
		line-height: 1;
		font-size: 14px !important;
		// padding: 5px 3px;
		text-align: center;
	}
	
	.close1 {
		width: 23%;
		flex: 0 0 23%;
	}
	
	.close2 {
		width: 20%;
		flex: 0 0 20%;
	}
	
	.close3 {
		width: 12%;
		flex: 0 0 12%;
	}
	
	.close4 {
		width: 10%;
		flex: 0 0 10%;
	}
	
	.close5 {
		width: 25%;
		flex: 0 0 15%;
	}
	
	.close6 {
		width: 20%;
		flex: 0 0 20%;
	}
	
</style>
